<template>
  <div class="box">
    <el-dialog v-model="visible" width="540px" :close-on-click-modal="false" @close="handleClose">
      <template #header>
        <div class="dialog-header">
          <span>{{ title }}</span>
        </div>
      </template>
      <!-- 查看区域 -->
      <template #default>
        <el-form label-width="100px" label-position="left">
          <el-form-item label="账号">
            <span>{{ form.phone }}</span>
          </el-form-item>

          <el-form-item label="姓名">
            <span>{{ form.name }}</span>
          </el-form-item>

          <el-form-item label="职业证书">
            <!-- <span>{{ form.certFileUrl }}</span> -->
            <img class="cert-image" :src="form.certFileUrl" />
          </el-form-item>

          <el-form-item label="评审日期">
            <span>{{ form.reviewDate }}</span>
          </el-form-item>

          <!-- 审核模式下才出现 -->
          <template v-if="mode === 'audit'">
            <el-form-item label="审核结果" required>
              <el-radio-group v-model="auditForm.status">
                <el-radio :label="1">审核通过</el-radio>
                <el-radio :label="2">审核驳回</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="auditForm.status === 2" label="驳回原因" required>
              <el-input v-model="auditForm.reason" type="textarea" :rows="3" maxlength="200" show-word-limit
                placeholder="请输入驳回原因" />
            </el-form-item>
          </template>
        </el-form>
      </template>

      <!-- footer -->
      <template #footer>
        <!-- 查看模式：只有确定 -->
        <template v-if="mode === 'view'">
          <el-button type="primary" plain @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleClose">确定</el-button>
        </template>

        <template v-else>
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" :loading="loading" @click="submitAudit">
            提交
          </el-button>
        </template>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick } from "vue";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";

interface EngineerItem {
  id: string;
  phone: string;
  name: string;
  certFileUrl: string;
  reviewDate: string;
}

const visible = ref(false);
const loading = ref(false);
const title = ref("查看工程师认证");
const mode = ref<"view" | "audit">("view");

const form = reactive<EngineerItem>({
  id: "",
  phone: "",
  name: "",
  certFileUrl: "",
  reviewDate: ""
});

const auditForm = reactive({
  status: 1, // 1 通过  2 驳回
  reason: ""
});

/**
 * 打开弹窗
 * @param row  工程师数据
 * @param openMode  view 仅查看  /  audit 审核
 */
function open(row: EngineerItem, openMode: "view" | "audit" = "view") {
  Object.assign(form, row);
  mode.value = openMode;
  title.value = openMode === "view" ? "查看工程师认证" : "工程师认证审核";
  nextTick(() => {
    auditForm.status = 1;
    auditForm.reason = "";
  });
  visible.value = true;
}

function handleClose() {
  visible.value = false;
}

async function submitAudit() {
  if (auditForm.status === 2 && !auditForm.reason.trim()) {
    ElMessage.warning("请输入驳回原因");
    return;
  }
  loading.value = true;
  try {
    await baseService.post("/noc/authengineeraudit/update", {
      id: form.id,
      auditStatus: auditForm.status.toString(), // 使用auditStatus而不是status，并转换为字符串
      auditReason: auditForm.status === 2 ? auditForm.reason : "" // 使用auditReason而不是rejectReason
    });
    ElMessage.success("审核完成");
    handleClose();
    emit("success");
  } catch (error) {
    console.error("审核失败:", error);
    ElMessage.error("审核失败，请稍后重试");
  } finally {
    loading.value = false;
  }
}

interface Emits {
  (e: "success"): void;
}
const emit = defineEmits<Emits>();

defineExpose({ open });
</script>
<style scoped lang="scss">
:deep(.el-dialog) {
  // background-color: pink;
  width: 500px;
}

:deep(.el-dialog__header) {
  width: 500px;
  height: 51px;
  background-color: rgba(228, 242, 255, 1);
  // background-color: pink;
}

:deep(.el-dialog__headerbtn) {
  margin-top: -6px;
  .el-dialog__close {
    font-size: 18px;
    font-weight: bold;
    // top: 2px;
  }
}



:deep(.el-dialog__body) {
  padding: 20px 20px 0 20px;
}

.dialog-header {
  margin-top: -6px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0px;
  // line-height: 26.06px;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: top;
  // background: rgba(228, 242, 255, 1);
}

.cert-image {
  width: 124px;
  height: 75px;
  opacity: 1;
  border-radius: 5px;
  border: 0.5px solid rgba(161, 160, 160, 1);
}

.el-form {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 23.17px;
  color: rgba(56, 56, 56, 1);
  text-align: left;
  vertical-align: top;
}
</style>
